<!--添加信用卡 -->
<template>
  <div>
    <!-- <van-nav-bar
      title="添加信用卡"
      left-arrow
      @click-left="$router.back()"
      class="black"
    ></van-nav-bar> -->
    <div class="body-box oh">
      <div class="header-box-46"></div>
      <div class="mag-t-20">
        <van-field
          type
          label="姓名"
          v-model="sendData.opener"
          disabled
          placeholder="请输入姓名"
          class="field__label_200 f-left"
        />
        <van-field
          type
          label="卡号"
          v-model="sendData.bankCard"
          @input="cardBinFun()"
          placeholder="请输入卡号"
          class="field__label_200 f-left mag-t-20"
        />
        <van-field
          type
          label="银行"
          v-model="sendData.bank"
          disabled
          placeholder="银行"
          class="field__label_200 f-left"
        />
        <van-cell @click="selDataOpen(1)" class="f-left" value="请选择" title="账单日" is-link>
          <span v-if="sendData.statementDate" class="c000">{{sendData.statementDate}}</span>
          <span v-else style="color:#949494;">请选择</span>
        </van-cell>
        <van-cell @click="selDataOpen(2)" class="f-left" value="请选择" title="还款日" is-link>
          <span v-if="sendData.repaymentDate" class="c000">{{sendData.repaymentDate}}</span>
          <span v-else style="color:#949494;">请选择</span>
        </van-cell>
        <van-field type label="手机号" v-model="sendData.reservePhone" placeholder="请输入手机号" class="field__label_200 f-left mag-t-20" />
      </div>
      <div class="pad-20">
        <div @click="saveCard()" class="blue-btn fff center mag-t-50 f-40">确认</div>
      </div>
    </div>
    <!--账单日 -->
    <van-popup v-model="showTip" position="bottom" :overlay="true">
      <van-area
        :area-list="selDataJson"
        @cancel="showTip=false"
        columns-num="1"
        title
        @confirm="selData"
      />
    </van-popup>
  </div>
</template>

<script>
var self = "";
export default {
  data() {
    return {
      selType: "1", //1:账单日 2:还款日
      showTip: false, //显示弹窗
      cardtype:"", //卡类型 01 为储蓄卡 02 为信用卡
      selDataJson: {
        province_list: {}
      }, //选择的日期集合
      sendData: {
        opener: "", //用户姓名
        bankCard:"",//银行卡号
        statementDate:"",//账单日
        repaymentDate:"",//还款日
        reservePhone:"",//预留手机号
        bankCard:"",//银行卡号
        bank:"",//银行
        bankCode:"",//
        type:"2",//1:储蓄卡2信用卡
        token:""
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    self = this;
    //获取token
    self.sendData.token = localStorage.getItem("token");
    self.sendData.customerId = localStorage.getItem("customerId");
    //日期列表
    for (var i = 1; i < 32; i++) {
      self.selDataJson.province_list[i] = i;
    }
    //获取用户信息
      //通过卡友圈获取大额的接口获取用户真实姓名
       var queryRate = await this.$axios(
        "https://community.1818pay.cn/plan/plan/queryRate",
        {
          //接口列表
          productIdentif: "PB999", //1大额
          token: self.sendData.token
        },
        "get"
      );
      var userDatqJson = {}; //用户基本信息
      if(queryRate.code==1000){
          userDatqJson = JSON.parse(queryRate.data);
          self.sendData.opener = userDatqJson.realName;
      }else{
        self.$toast(queryRate.message)
      }

      console.log("queryRate",queryRate)

  },
  //方法定义
  methods: {
    async saveCard() {
      //保存卡
       if (self.sendData.opener == "") {
        self.$toast("请输入姓名");
        return;
      }
      if (self.sendData.bankCard == "") {
        self.$toast("请输入信用卡卡号");
        return;
      }
      if(self.sendData.statementDate == "") {
        self.$toast("请选择账单日");
        return;
      }
      if(self.sendData.repaymentDate == "") {
        self.$toast("请选择还款日");
        return;
      }
       if(self.sendData.statementDate == self.sendData.repaymentDate) {
        self.$toast("账单日与还款日不可以为同一天");
        return;
      }
      if (self.sendData.reservePhone == "") {
        self.$toast("请输入手机号");
        return;
      }
      if(self.cardtype!='02'){
        self.$toast("请输入信用卡卡号");
        return;
      }
      console.log("提交的数据",self.sendData);
      var queryList = await self.$axios(
         "https://community.1818pay.cn/customer/bankCard/add",
        //  "http://192.168.1.187/customer/bankCard/add",
        self.sendData,
        "post"
      );
      if(queryList.code=='1000'){
          self.$toast("添加成功");
          setTimeout(()=>{
               self.$router.back();
          },800)
      }else{
        self.$toast(queryList.message)
      }
     
    },
    selDataOpen(val) {
      //1:账单日 2:还款日
      self.selType = val;
      self.showTip = true;
    },
    selData(val) {
      //选择的日期
      //1:账单日 2:还款日
      if (self.selType == 1) {
        self.sendData.statementDate = self.PrefixInteger(val[0].code, 2);
      } else {
        self.sendData.repaymentDate = self.PrefixInteger(val[0].code, 2);
      }

      self.showTip = false; //关闭选择弹窗
    },
    async cardBinFun() {
      //查询出,发卡行
      console.log(
        "self.sendData.cardNumber.length",
        self.sendData.bankCard.length
      );
      if (self.sendData.bankCard.length == 6) {
        //满足6位的时候会查询
        //01 储蓄卡 02 信用卡
        var queryList = await self.$axios(
          "https://community.1818pay.cn/customer/bankCard/getBankBin",
          // "http://192.168.1.187/customer/bankCard/getBankBin",
          {
            cardNo: self.sendData.bankCard,
            token:self.sendData.token
          },
          "get"
        );
        if (queryList.code == "1000") {
          if (queryList.data) {
            //卡bin库有数据
               self.cardtype = queryList.data.cardtype;
               if (queryList.data.cardtype == "02") {
                     //判断是否为储蓄卡
                    self.sendData.bankCode = queryList.data.bankcode;
                    self.sendData.bank = queryList.data.issuingname;
                    console.log(" self.sendData.bank", self.sendData.bank)
               }else{
                    self.sendData.bankCode ="";
                    self.sendData.bank ="";
                    self.$toast("请输入信用卡卡号");
               }
          } else {
            //卡bin库没有数据
            self.sendData.bankCode ="";
            self.sendData.bank ="";
            self.$toast("该银行暂不支持请联系客服");
          }
        } else {
          self.$toast(queryList.message);
          return;
        }
        console.log("queryList", queryList);
      }
    }
  }
};
</script>
<style  scoped>
.blue-btn{background: #3A87F8FF; border-radius: 0.1rem; padding:0.2rem; box-sizing: border-box;}
/* @import url(); 引入css类 */
</style>